<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">余额</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="user_pay_a">
				<view class="user_pay_a_a">
					<view class="user_pay_a_a_a">我的余额</view>
					<view class="user_pay_a_a_b">
						<span>￥</span>{{user_info.user_money}}
					</view>
				</view>
				<!-- <view class="user_pay_a_b" @click="goPage('/pages/balance_s/balance_s')">明细</view> -->
			</view>


			
			<!-- 余额明细 -->
			<view class="viewbox"></view>
			<view class="index_b_d_aaa">
				<u-tabs
					ref="tabs" 
					:current="current" 
					@click="tabsChange" 
					lineColor="#E71102"
					:activeStyle="{
							fontSize: '28rpx',
							fontFamily: 'PingFang SC',
							fontWeight: '800',
							color: '#E71102'
							}"
					:inactiveStyle="{
							fontSize: '28rpx',
							fontFamily: 'PingFang SC',
							color: '#333333'
							}"
					itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
					:list="order_type" 
					:is-scroll="false"
					>
				</u-tabs>
			</view>
			<view class="user_withdraw_code" v-if="withdrawList.length>0">
				<view v-if="current==1">
					<view class="user_withdraw_code_a" v-for="(item, index) in withdrawList" :key="index">
						<view class="user_withdraw_code_a_a">
							<view class="user_withdraw_code_a_a_a">{{item.desc}}</view>
							<view class="user_withdraw_code_a_a_b">¥<span>{{item.total}}</span></view>
						</view>
						<view class="user_withdraw_code_a_b">
							<view class="user_withdraw_code_a_b_a">{{item.create_time}}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="user_withdraw_code_a" v-for="(item, index) in withdrawList" :key="index">
						<view class="user_withdraw_code_a_a">
							<view class="user_withdraw_code_a_a_a">{{item.remark}}</view>
							<view class="user_withdraw_code_a_a_b">{{item.change_amount}}</view>
						</view>
						<view class="user_withdraw_code_a_b">
							<view class="user_withdraw_code_a_b_a">{{item.create_time}}</view>
							<view class="user_withdraw_code_a_b_b">明细余额{{item.left_amount}}</view>
						</view>
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/goods_null.png"></image>
					<text class="lighter">暂无明细记录</text>
				</view>
			</loading-footer>
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
import {
	loadingType
} from '@/utils/type';
import api from '@/common/apiService.js';
const { getUserIntegral } = api;
export default {
	data() {
		return {
			showLoading: true,
			xuanzhong: request.baseUrl_img + '/img/xuanzhong.png',
			wx: request.baseUrl_img + '/img/wx.png',
			tuandui_pay: request.baseUrl_img + '/img/tuandui_pay.png',
			is_pay: 1,
			uid: 0,
			user_info: [],
			recharge_template_list: [],
			money: '',
			distribution_code: '',
			information: {},
			
			// 
			baseUrl_img:request.baseUrl_img,
			withdrawList:[],
			status: loadingType.LOADING,
			source_type:0,
			page: 1,
			limit:8,
			current:0,
			order_type: [
				{
					name:'全部'
				},
				{
					name:'支出'
				},
				{
					name:'收入'
				}
			],
			
		}
	},
	onLoad: function (options) {
		this.distribution_code = options.distribution_code ?? '';
		// this.recharge_template_click();
	},
	onShow() {
		this.uid = uni.getStorageSync('uid');
		this.user_click();
		this.onRefresh();
	},
	onReachBottom: function() {
		this.getWithdrawFun();
	},
	methods: {
		formatMoney(money) {
			return parseFloat(money).toFixed(2);
		},
		tabsChange(e){
			this.current = e.index;
			this.onRefresh();
		},
		onRefresh() {
			this.page = 1
			this.withdrawList = []
			this.status = loadingType.LOADING;
			this.getWithdrawFun();
		},
		async getWithdrawFun() {
			let {
				page,
				limit,
				withdrawList,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				limit:limit,
				uid:this.uid
			}
			let url='u-AccountLogList';
			if(this.current==0){
				paramsList.source_type=1
			}
			if(this.current==1){
				url='r-rechargeRecord'
			}
			if(this.current==2){
				paramsList.source_type=1
				paramsList.type=2
			}
			if(this.current==3){
				paramsList.source_type=1
				paramsList.type=1
			}
			let optsList = {
				url:url,
				method: 'get'
			};
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) withdrawList = []
					let {
						list,
						more
					} = res.data.data
					this.withdrawList.push(...list)
					this.page = ++page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.withdrawList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				this.showLoading=false;
			});
		},
		goPage(url) {
			if (!this.$util.isLogin()) {
				return;
			}
			uni.navigateTo({
				url
			});
		},
		order_click(id = '') {
			if (id == '') {
				if (this.money == '' || this.money == '0') {
					uni.showToast({
						title: '充值金额必须大于0',
						icon: 'none',
						duration: 2000
					});
					return;
				}
			}
			let paramsList = {
				money: this.money,//支付金额
				uid: this.uid,//终点联系人id
				template_id: id
			}
			let optsList = {
				url: 'r-recharge_buy',
				method: 'post'
			};
			uni.showLoading({
				title: '提交中',
				mask: true
			})
			let _this = this;
			request.httpRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if (res.data.code == 200) {
					_this.money = '';
					uni.navigateTo({
						url: '/pages/confirm_order/order_details?order_sn=' + res.data.data.order_sn + '&from=recharge'
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		user_click() {
			let paramsList = {
				'uid': this.uid
			}
			let optsList = {
				url: 'u-role_config',
				method: 'post'
			};
			let _this = this;
			request.httpRequest(optsList, paramsList).then(res => {
				uni.hideLoading();
				if (res.data.code == 200) {
					_this.user_info = res.data.data;
				}
				this.showLoading = false;
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.user_pay_a {
	width: 750rpx;
	height: 200rpx;
	background-color: #ffffff;
	padding: 68rpx 44rpx 30rpx 44rpx;
}

.user_pay_a_a {
	float: left;
}

.user_pay_a_a_a {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}

.user_pay_a_a_b {
	font-size: 72rpx;
	font-family: DINPro;
	font-weight: 800;
	color: #e27222;
}

.user_pay_a_a_b span {
	font-size: 30rpx;
}

.user_pay_a_b {
	float: right;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 100rpx;
}

.user_pay_d {
	width: 750rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin: auto;
	margin-top: 20rpx;
	padding: 35rpx 30rpx;
	overflow: hidden;
}

.user_pay_d_a {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #000000;
}

.user_pay_d_b {
	width: 700rpx;
	height: 100rpx;
	background: #F8F8F8;
	border-radius: 10rpx;
	margin-top: 30rpx;
}

.user_pay_d_b_a {
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #222222;
	float: left;
	line-height: 100rpx;
	height: 100rpx;
	width: 78rpx;
	text-align: center;
}

.user_pay_d_b_b {
	float: left;
	width: 560rpx;
	height: 100rpx;
}

.user_pay_d_b_b input {
	width: 560rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #222222;
}

.user_pay_d_c {
	height: auto;
}

.user_pay_d_c_a {
	width: 33.33%;
	height: auto;
	float: left;
	margin-top: 25rpx;
}

.user_pay_d_c_aaa {
	border: 1rpx solid #efefef;
	border-radius: 4rpx;
	text-align: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	width: 98%;
	padding: 20rpx 0;
	border-radius: 20rpx;
}

.user_pay_d_c_a_a {
	font-size: 34rpx;
}

.user_pay_d_c_a_b {
	color: #666666;
}

.user_pay_d_c_aa {
	color: #FFFFFF;
	background: #DA0909;
}


.user_pay_b {
	width: 700rpx;
	margin: auto;
	padding: 29rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 20rpx;
}

.user_pay_b_b {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #222222;
	line-height: 80rpx;
}

.user_pay_b_a {
	height: 100rpx;
	line-height: 100rpx;
	color: #333333;
	font-size: 28rpx;
	font-family: PingFangSC-regular;
	background: #fff;
	border-radius: 20rpx;
}

.user_pay_b_aa {
	background: #F0F9F6;
}

.user_pay_b_a_a {
	float: left;
	background-position: 25rpx;
	background-repeat: no-repeat;
	background-size: 60rpx;
	padding-left: 105rpx;
}

.user_pay_b_a_a_a {
	line-height: 100rpx;
	float: left;
}

.user_pay_b_a_a_b {
	float: left;
	font-size: 24rpx;
	color: #ccc;
	line-height: 100rpx;
	margin-left: 30rpx;
}

.user_pay_b_a_b {
	width: 36rpx;
	height: 36rpx;
	float: right;
	background-color: #E5E5E5;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21rpx 15rpx;
	border-radius: 50%;
	margin-top: 35rpx;
	margin-right: 35rpx;
}

.user_pay_b_a_bb {
	background-color: #DA0909;
}

.user_pay_c_a {
	width: 640rpx;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	color: #ffffff;
	font-size: 30rpx;
	font-family: PingFangSC-regular;
	text-align: center;
	background-color: #E71102;
	margin: auto;
	margin-top: 80rpx;
}


// 详细
.user_withdraw_code{
		overflow: hidden;
	}
	.user_withdraw_code_a{
		width: 702rpx;
		height:auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		overflow: hidden;
		padding: 33rpx 28rpx;
	}
	.user_withdraw_code_a_a{
		overflow: hidden;
	}
	.user_withdraw_code_a_a_a{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		float: left;
	}
	.user_withdraw_code_a_a_b{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color:#DA0909;
		float:right;
	}
	.user_withdraw_code_a_b{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.user_withdraw_code_a_b_a{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		float: left;
	}
	.user_withdraw_code_a_b_b{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#BABABA;
		float:right;
	}
	.user_withdraw_code_a_c{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:#FF3F4B;
	}
	.user_withdraw_code_a_c{
		height: 175rpx;
		width: 100%;
		overflow: hidden;
	}
	.user_withdraw_code_a_c_a{
		width: 175rpx;
		height: 175rpx;
	}
</style>
